import { PageContainer } from '@ant-design/pro-components';
import MarkdownIt from 'markdown-it';
import MdEditor from 'react-markdown-editor-lite';
// import style manually
import 'react-markdown-editor-lite/lib/index.css';

// Register plugins if required
// MdEditor.use(YOUR_PLUGINS_HERE);

// Initialize a markdown parser
const mdParser = new MarkdownIt(/* Markdown-it options */);

const Index: React.FC = () => {
  function handleEditorChange({ html, text }: any) {
    console.log('handleEditorChange', html, text);
  }
  return (
    <PageContainer
      ghost
      header={{
        title: 'markdown编辑器',
      }}
    >
      <MdEditor
        style={{ height: '500px' }}
        renderHTML={(text) => mdParser.render(text)}
        onChange={handleEditorChange}
      />
    </PageContainer>
  );
};

export default Index;
